<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
<head>
    <meta charset="UTF-8">
    <title>管理员仪表盘</title>
    <style>
        .admin-stat-card {
            border: none;
            border-radius: 0.75rem;
            height: 100%;
            transition: all 0.3s;
        }
        
        .admin-stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-size: 1.75rem;
        }
        
        .admin-card {
            border: none;
            border-radius: 1rem;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        
        .admin-card-header {
            border-bottom: 1px solid rgba(0,0,0,0.05);
            background-color: white;
            padding: 1rem 1.5rem;
            font-weight: 600;
        }
        
        .admin-quick-link {
            display: flex;
            align-items: center;
            padding: 1rem;
            border-radius: 0.75rem;
            transition: all 0.2s;
            text-decoration: none;
            color: var(--text-color);
            background-color: white;
            border: 1px solid rgba(0,0,0,0.05);
            margin-bottom: 1rem;
        }
        
        .admin-quick-link:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
            color: var(--primary-color);
        }
        
        .admin-quick-link-icon {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 1rem;
            margin-right: 1rem;
            font-size: 1.5rem;
        }
        
        .welcome-card {
            background: linear-gradient(135deg, var(--primary-color) 0%, #224abe 100%);
            color: white;
            border-radius: 1rem;
            position: relative;
            overflow: hidden;
        }
        
        .welcome-card::after {
            content: "";
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            bottom: -100px;
            right: -100px;
        }
        
        .system-status-icon {
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            margin-right: 1rem;
        }
    </style>
</head>
<body>
    <div th:replace="~{layout :: body(content=~{::content})}">
        <div th:fragment="content">
            <!-- 页面标题 -->
            <div class="page-header mb-4">
                <h1>管理员仪表盘</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a th:href="@{/home}">首页</a></li>
                        <li class="breadcrumb-item active" aria-current="page">管理员仪表盘</li>
                    </ol>
                </nav>
            </div>
            
            <!-- 欢迎卡片 -->
            <div class="card welcome-card shadow-sm mb-4">
                <div class="card-body p-4">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h2 class="fw-bold mb-2">欢迎回来，管理员！</h2>
                            <p class="mb-0">今天是 <span th:text="${#dates.format(#dates.createNow(), 'yyyy年MM月dd日')}">2025年04月29日</span> - 登录时间：<span th:text="${#dates.format(#dates.createNow(), 'HH:mm')}">09:30</span></p>
                        </div>
                        <div class="col-md-4 text-end">
                            <a th:href="@{/admin/users}" class="btn btn-light">
                                <i class="bi bi-people me-2"></i>管理用户
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 统计卡片 -->
            <div class="row g-4 mb-4">
                <div class="col-md-3">
                    <div class="card admin-stat-card shadow-sm">
                        <div class="card-body p-3">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                                    <i class="bi bi-people"></i>
                                </div>
                                <div class="dropdown">
                                    <button class="btn btn-sm p-0" type="button" data-bs-toggle="dropdown">
                                        <i class="bi bi-three-dots-vertical"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                        <li><a class="dropdown-item" href="#"><i class="bi bi-eye me-2"></i>查看详情</a></li>
                                        <li><a class="dropdown-item" href="#"><i class="bi bi-arrow-clockwise me-2"></i>刷新</a></li>
                                    </ul>
                                </div>
                            </div>
                            <h3 class="fw-bold mb-1">125</h3>
                            <p class="text-muted mb-0">用户总数</p>
                            <div class="mt-2 small text-success">
                                <i class="bi bi-graph-up me-1"></i>
                                <span>增长 12%</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card admin-stat-card shadow-sm">
                        <div class="card-body p-3">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <div class="stat-icon bg-success bg-opacity-10 text-success">
                                    <i class="bi bi-person-check"></i>
                                </div>
                                <div class="dropdown">
                                    <button class="btn btn-sm p-0" type="button" data-bs-toggle="dropdown">
                                        <i class="bi bi-three-dots-vertical"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                        <li><a class="dropdown-item" href="#"><i class="bi bi-eye me-2"></i>查看详情</a></li>
                                        <li><a class="dropdown-item" href="#"><i class="bi bi-arrow-clockwise me-2"></i>刷新</a></li>
                                    </ul>
                                </div>
                            </div>
                            <h3 class="fw-bold mb-1">112</h3>
                            <p class="text-muted mb-0">活跃用户</p>
                            <div class="mt-2 small text-success">
                                <i class="bi bi-graph-up me-1"></i>
                                <span>增长 5%</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card admin-stat-card shadow-sm">
                        <div class="card-body p-3">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <div class="stat-icon bg-info bg-opacity-10 text-info">
                                    <i class="bi bi-shield-check"></i>
                                </div>
                                <div class="dropdown">
                                    <button class="btn btn-sm p-0" type="button" data-bs-toggle="dropdown">
                                        <i class="bi bi-three-dots-vertical"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                        <li><a class="dropdown-item" href="#"><i class="bi bi-eye me-2"></i>查看详情</a></li>
                                        <li><a class="dropdown-item" href="#"><i class="bi bi-arrow-clockwise me-2"></i>刷新</a></li>
                                    </ul>
                                </div>
                            </div>
                            <h3 class="fw-bold mb-1">8</h3>
                            <p class="text-muted mb-0">管理员数</p>
                            <div class="mt-2 small text-success">
                                <i class="bi bi-graph-up me-1"></i>
                                <span>增长 2%</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card admin-stat-card shadow-sm">
                        <div class="card-body p-3">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                                    <i class="bi bi-clock-history"></i>
                                </div>
                                <div class="dropdown">
                                    <button class="btn btn-sm p-0" type="button" data-bs-toggle="dropdown">
                                        <i class="bi bi-three-dots-vertical"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                        <li><a class="dropdown-item" href="#"><i class="bi bi-eye me-2"></i>查看详情</a></li>
                                        <li><a class="dropdown-item" href="#"><i class="bi bi-arrow-clockwise me-2"></i>刷新</a></li>
                                    </ul>
                                </div>
                            </div>
                            <h3 class="fw-bold mb-1">350</h3>
                            <p class="text-muted mb-0">登录次数</p>
                            <div class="mt-2 small text-success">
                                <i class="bi bi-graph-up me-1"></i>
                                <span>增长 18%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 系统状态 -->
            <div class="row g-4 mb-4">
                <div class="col-md-6">
                    <div class="admin-card shadow-sm">
                        <div class="admin-card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="bi bi-pc-display text-primary me-2"></i>系统状态</h5>
                            <div>
                                <button class="btn btn-sm btn-light" id="refreshSystemStatus">
                                    <i class="bi bi-arrow-clockwise"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="list-group list-group-flush">
                                <div class="list-group-item px-0 py-3 border-0">
                                    <div class="d-flex align-items-center">
                                        <div class="system-status-icon bg-success bg-opacity-10 text-success">
                                            <i class="bi bi-server"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h6 class="mb-0">服务器状态</h6>
                                                <span class="badge bg-success">正常</span>
                                            </div>
                                            <div class="progress mt-2" style="height: 5px;">
                                                <div class="progress-bar bg-success" role="progressbar" style="width: 25%"></div>
                                            </div>
                                            <div class="d-flex justify-content-between mt-1">
                                                <small class="text-muted">CPU使用率</small>
                                                <small>25%</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-group-item px-0 py-3 border-0">
                                    <div class="d-flex align-items-center">
                                        <div class="system-status-icon bg-info bg-opacity-10 text-info">
                                            <i class="bi bi-hdd-rack"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h6 class="mb-0">内存使用</h6>
                                                <span class="badge bg-success">正常</span>
                                            </div>
                                            <div class="progress mt-2" style="height: 5px;">
                                                <div class="progress-bar bg-info" role="progressbar" style="width: 40%"></div>
                                            </div>
                                            <div class="d-flex justify-content-between mt-1">
                                                <small class="text-muted">内存使用率</small>
                                                <small>40%</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-group-item px-0 py-3 border-0">
                                    <div class="d-flex align-items-center">
                                        <div class="system-status-icon bg-warning bg-opacity-10 text-warning">
                                            <i class="bi bi-hdd"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h6 class="mb-0">存储空间</h6>
                                                <span class="badge bg-warning text-dark">注意</span>
                                            </div>
                                            <div class="progress mt-2" style="height: 5px;">
                                                <div class="progress-bar bg-warning" role="progressbar" style="width: 75%"></div>
                                            </div>
                                            <div class="d-flex justify-content-between mt-1">
                                                <small class="text-muted">磁盘使用率</small>
                                                <small>75%</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="admin-card shadow-sm">
                        <div class="admin-card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="bi bi-lightning-charge text-warning me-2"></i>快捷功能</h5>
                            <div>
                                <span class="badge bg-primary">系统管理</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <a th:href="@{/admin/users}" class="admin-quick-link">
                                        <div class="admin-quick-link-icon bg-primary bg-opacity-10 text-primary">
                                            <i class="bi bi-people"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-1">用户管理</h6>
                                            <p class="mb-0 text-muted small">管理系统用户</p>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-6">
                                    <a href="#" class="admin-quick-link">
                                        <div class="admin-quick-link-icon bg-success bg-opacity-10 text-success">
                                            <i class="bi bi-gear"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-1">系统设置</h6>
                                            <p class="mb-0 text-muted small">配置系统参数</p>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-6">
                                    <a href="#" class="admin-quick-link">
                                        <div class="admin-quick-link-icon bg-info bg-opacity-10 text-info">
                                            <i class="bi bi-shield-check"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-1">安全管理</h6>
                                            <p class="mb-0 text-muted small">设置安全策略</p>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-6">
                                    <a href="#" class="admin-quick-link">
                                        <div class="admin-quick-link-icon bg-danger bg-opacity-10 text-danger">
                                            <i class="bi bi-file-earmark-text"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-1">日志查看</h6>
                                            <p class="mb-0 text-muted small">查看系统日志</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 最近活动和通知 -->
            <div class="row g-4">
                <div class="col-md-6">
                    <div class="admin-card shadow-sm">
                        <div class="admin-card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="bi bi-activity text-danger me-2"></i>最近活动</h5>
                            <div>
                                <a href="#" class="btn btn-sm btn-light">查看全部</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="list-group list-group-flush">
                                <div class="list-group-item px-0 py-3 border-0">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="mb-1 fw-bold">新用户注册</h6>
                                            <p class="mb-0 text-muted">用户 "user123" 完成了注册</p>
                                        </div>
                                        <small class="text-muted">刚刚</small>
                                    </div>
                                </div>
                                <div class="list-group-item px-0 py-3 border-0">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="mb-1 fw-bold">管理员登录</h6>
                                            <p class="mb-0 text-muted">管理员登录了系统</p>
                                        </div>
                                        <small class="text-muted">10分钟前</small>
                                    </div>
                                </div>
                                <div class="list-group-item px-0 py-3 border-0">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="mb-1 fw-bold">用户角色更新</h6>
                                            <p class="mb-0 text-muted">用户 "admin2" 被赋予管理员权限</p>
                                        </div>
                                        <small class="text-muted">1小时前</small>
                                    </div>
                                </div>
                                <div class="list-group-item px-0 py-3 border-0">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="mb-1 fw-bold">系统更新</h6>
                                            <p class="mb-0 text-muted">系统已更新到最新版本</p>
                                        </div>
                                        <small class="text-muted">1天前</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="admin-card shadow-sm">
                        <div class="admin-card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="bi bi-bell text-warning me-2"></i>系统通知</h5>
                            <div>
                                <span class="badge bg-danger">3条新通知</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="list-group list-group-flush">
                                <div class="list-group-item px-0 py-3 border-0">
                                    <div class="d-flex align-items-start">
                                        <div class="me-3">
                                            <span class="badge bg-primary p-2 rounded-circle">
                                                <i class="bi bi-info"></i>
                                            </span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h6 class="mb-0 fw-bold">系统维护通知</h6>
                                                <small class="text-muted">1小时前</small>
                                            </div>
                                            <p class="mb-0 text-muted">系统将在今晚23:00-24:00进行例行维护</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-group-item px-0 py-3 border-0">
                                    <div class="d-flex align-items-start">
                                        <div class="me-3">
                                            <span class="badge bg-warning p-2 rounded-circle">
                                                <i class="bi bi-exclamation"></i>
                                            </span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h6 class="mb-0 fw-bold">磁盘空间警告</h6>
                                                <small class="text-muted">5小时前</small>
                                            </div>
                                            <p class="mb-0 text-muted">服务器磁盘使用率已达到75%，请及时清理</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-group-item px-0 py-3 border-0">
                                    <div class="d-flex align-items-start">
                                        <div class="me-3">
                                            <span class="badge bg-success p-2 rounded-circle">
                                                <i class="bi bi-check"></i>
                                            </span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h6 class="mb-0 fw-bold">安全检查完成</h6>
                                                <small class="text-muted">1天前</small>
                                            </div>
                                            <p class="mb-0 text-muted">系统安全检查已完成，未发现安全隐患</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 